<template>
    <el-drawer v-model="dialogVisible" :title="title" size="95%">
        <el-form :model="formData" ref="formDataRef" :rules="rules" inline>
            <el-form-item label="角色名称" prop="roleName">
                <el-input v-model="formData.roleName" placeholder="请输入角色名称"></el-input>
            </el-form-item>
            <el-form-item label="排序号" prop="roleSort">
                <el-input-number v-model="formData.roleSort" controls-position="right" :min="1"></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="formData.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
        </el-form>
        <MenuTreeNode v-if="dialogVisible && roleId" v-for="item in menuList" :key="item.id" :divider="true" :checkedKeys="checkedKeys" @change="e => checkedKeys = e" :node="item" />
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="handleSubmit">确定</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script>
import { reactive, toRefs } from "vue"
import { addRoles, roleMenuTreeselect, updateRole } from "@/api/system/role"
import MenuTreeNode from './MenuTreeNode.vue';

export default {
    name: "roleDialog",
    components: {
        MenuTreeNode,
    },
    emits: ['rest'],
    setup(props, { emit }) {
        const data = reactive({
            title: "角色数据",
            dialogVisible: false,
            formData: {},
            formDataRef: null,
            menuList: [],
            checkedKeys: [],
            roleId: '',
            rules: {
                roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
                roleSort: [{ required: true, message: "请输入排序号", trigger: "blur" }]
            }
        })

        const handleSubmit = () => {
            console.log(data.checkedKeys, 'checkedKeys')
            if(data.formData.roleId){
                console.log('编辑')
                let obj = {
                    status: '0',
                    roleName: data.formData.roleName,
                    roleSort: data.formData.roleSort,
                    remark: data.formData.remark,
                    roleKey: data.formData.roleName,
                    roleId: data.formData.roleId,
                    menuIds: data.checkedKeys
                }
                data.formDataRef.validate((valid) => {
                    if(valid){
                        updateRole(obj).then(res=>{
                            if(res.code == 200){
                                data.dialogVisible = false
                                data.formDataRef.resetFields()
                                emit('rest')
                            }
                        })
                    }
                })
            }else{
                console.log('新增')
                let obj = {
                    status: '0',
                    roleName: data.formData.roleName,
                    roleSort: data.formData.roleSort,
                    remark: data.formData.remark,
                    roleKey: data.formData.roleName
                }
                data.formDataRef.validate((valid) => {
                    if(valid){
                        addRoles(obj).then(res=>{
                            if(res.code == 200){
                                data.dialogVisible = false
                                data.formDataRef.resetFields()
                                emit('rest')
                            }
                        })
                    }
                })
            }  
        }

        const cancel = () => {
            data.dialogVisible = false
        }

        const openDialog = (e) => {
            console.log('触发了');
            data.checkedKeys = []
            if(e.roleId){
                data.roleId = e.roleId
                roleMenuTreeselect({ roleId: e.roleId }).then(res=>{
                    if(res.code == 200){
                        data.menuList = res.data.menus

                        if (e.roleId) {
                            data.roleId = e.roleId
                            data.formData = res.data.roleData
                            data.checkedKeys = res.data.checkedKeys
                        } else {
                            data.roleId = ''
                        }
                        data.dialogVisible = true
                    }
                })
            }else{
                data.dialogVisible = true
            }
        }

        return {
            ...toRefs(data),
            openDialog,
            cancel,
            handleSubmit
        }
    }
};
</script>
<style lang="scss" scoped>

</style>